<template>
  <div class="sysRole">

    <div class="searchArea">
      <span style="font-size: 13px"> 内容：</span>
      <el-input
        class="nameInput"
        placeholder="请输入内容"
        size="small">
      </el-input>
      <el-button type="primary" size="small" icon="el-icon-search" @click="loadData">搜索</el-button>
      <el-button type="primary" size="small" icon="el-icon-refresh-right" @click="reset">重置</el-button>
    </div>

    <div class="actionArea">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="openAddDialog">添加</el-button>
    </div>

    <div class="dataArea">
      <el-table

        :header-cell-style="{'text-align':'center','height':'49px','color':'black','background-color':'rgb(250,250,250)'}" m
        :cell-style="{'text-align':'center'}"
        border
        size="small"
        :data="sysRoleList"
      >
        <el-table-column
          prop="createTime"
          label="创建时间"
        >
        </el-table-column>
        <el-table-column
          prop="roleName"
          label="角色名称"
        >
        </el-table-column>
        <el-table-column
          prop="code"
          label="角色编码"
        >
        </el-table-column>
        <el-table-column
          label="操作"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" style="margin-right: 10px" @click="openEditDialog(scope.row)">编辑</el-button>
            <el-dropdown>
              <span class="el-dropdown-link" style="font-size: 12px">
               更多<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <span @click="openAuthDialog(scope.row)">
                   <el-dropdown-item>授权</el-dropdown-item>
                </span>

                <el-dropdown-item>
                  <el-popconfirm
                    title="确定要删除该记录吗？"
                    icon="el-icon-delete"
                    @onConfirm="confirmDeleteSysRole(scope.row.id)"
                  >
                    <el-button type="text" slot="reference" style="color: red" size="small">删除</el-button>
                  </el-popconfirm>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>

      <div class="page">
        <el-pagination
          background
          :current-page="page.pageNo"
          :page-size="page.pageSize"
          :total="page.total"
          hide-on-single-page
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          :page-sizes="[10,20,30,40]"
          layout=" total,prev, pager, next,sizes, jumper"
        >
        </el-pagination>
      </div>
    </div>

    <el-dialog :visible.sync="showAddDialog" title="添加" class="addDialog">
      <el-form :model="addSysRole"
               ref="addForm"
               label-position="right"
               label-width="80px"
               :rules="rules">
        <el-form-item
          prop="roleName"
          label="角色名称"
        >
          <el-input placeholder="请输入角色名称" v-model="addSysRole.roleName"></el-input>
        </el-form-item>
        <el-form-item
          prop="code"
          label="角色编码"
        >
          <el-input placeholder="请输入角色编码" v-model="addSysRole.code"></el-input>
        </el-form-item>
      </el-form>
      <div style="text-align: right">
        <el-button type="danger" size="small" style="border-radius: 0" @click="closeAddDialog">取消</el-button>
        <el-button type="primary" size="small" style="border-radius: 0" @click="confirmAddSysRole">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog :visible.sync="showEditDialog" title="修改信息" class="editDialog">
      <el-form :model="editSysRole" ref="editForm" label-position="left" label-width="80px" :rules="rules">


        <el-form-item
          prop="roleName"
          label="角色名称"
        >
          <el-input placeholder="请输入角色名称" v-model="editSysRole.roleName"></el-input>
        </el-form-item>

        <el-form-item
          prop="code"
          label="角色编码"
        >
          <el-input placeholder="请输入角色编码" v-model="editSysRole.code"></el-input>
        </el-form-item>

      </el-form>
      <div style="text-align: right">
        <el-button type="danger" size="small" style="border-radius: 0" @click="closeEditDialog">取消</el-button>

        <el-button type="primary" size="small" style="border-radius: 0" @click="confirmEditSysRole">确定</el-button>
      </div>
    </el-dialog>

    <el-drawer :visible.sync="showAuthDialog"
               direction="rtl"

               :before-close="handleCloseBefore"
               :title="editSysRole.roleName+'授权'"
               :close-on-click-modal="false">
      <div class="drawerWrapper">
        <div class="treeWrapper">
          <el-tree
            ref="permissionTree"
            :default-expand-all="true"
            :props="authProps"
            :data="menuList"
            :default-checked-keys="permissions"
            node-key="id"
            show-checkbox
            @check-change="handleCheckChange"
          >
          </el-tree>
        </div>

        <div class="action">
          <div style="float: left">
            <el-dropdown>
              <el-button size="">树操作 <i class="el-icon-arrow-up"></i></el-button>
              <el-dropdown-menu slot="dropdown">
                <span @click="closeAll">
                    <el-dropdown-item>合并所有</el-dropdown-item>
                </span>
                <span @click="expandAll">
                    <el-dropdown-item>展开所有</el-dropdown-item>
                </span>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
          <div style="float: right">
            <el-button size="" style="width: 120px" @click="showAuthDialog = false">取消</el-button>
            <el-button size="" style="width: 120px" type="primary" @click="savePermissions">保存</el-button>
          </div>
        </div>
      </div>

    </el-drawer>

  </div>
</template>

<script>

import {getAction, postAction} from "@/utils/http";
import {Message} from "element-ui";

export default {
  name: "sysRole",
  data() {
    return {
      authProps: {
        label: "menuName",
        children: "children",
        value: "id"
      },
      showAuthDialog: false,
      showAddDialog: false,
      showEditDialog: false,
      addSysRole: {
        username: '',
        password: '',
        birthday: ''
      },
      editSysRole: {},
      sysRoleList: [],
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      rules: {
        roleName: [{required: true, message: '请输入角色名称', trigger: 'blur'}],
        code: [{required: true, message: '请输入角色编码', trigger: 'blur'}],
      },
      menuList:[],
      searchParams: {},
      permissions: [],
      authList: [],
      urls: {
        list: "/sysRole/sysRole/list",
        queryList: "/sysRole/sysRole/queryList",
        add: "/sysRole/sysRole/add",
        edit: "/sysRole/sysRole/edit",
        deleteById: "/sysRole/sysRole/deleteById",
        deleteBatch: "/sysRole/sysRole/deleteBatch",
        getPermissionsByRole: "/sysMenu/sysMenu/getMenuByRole",
        savePermissions: "/sysMenuPermission/sysMenuPermission/saveRolePermissions"
      }
    }
  },
  created() {
    this.loadData()
  },
  methods: {
    savePermissions(){
      let params = {
        roleCode:this.editSysRole.code,
        menuList:this.authList
      }
      postAction(this.urls.savePermissions,params).then(res=>{
        if (res.success){
          Message.success("保存成功！");
          this.authList = []
          this.showAuthDialog = false
        }
      })
    },
    closeAll(){
      for (const i in this.$refs.permissionTree.store.nodesMap) {
        this.$refs.permissionTree.store.nodesMap[i].expanded = false;
      }
    },
    expandAll(){
      for (const i in this.$refs.permissionTree.store.nodesMap) {
        this.$refs.permissionTree.store.nodesMap[i].expanded  = true
      }
    },
    handleCloseBefore(done) {
      this.editSysRole = {}
      this.authList = []
      done()
    },

    handleCheckChange(data, checked, indeterminate) {
      if (checked){
        for (const i in this.authList) {
          if (this.authList[i].id === data.id){
            return
          }
        }
        this.authList.push(data)
      }else {
        for (const i in this.authList) {
          if (this.authList[i].id === data.id){
            this.authList.splice(i, 1);
            break
          }
        }
      }
      console.log(this.authList)
    },


    getPermissions(roleCode) {
      let params = {roleCode}
      getAction(this.urls.getPermissionsByRole, params).then(res => {
        if (res.success) {
          this.menuList = res.result.menuList
          this.permissions = res.result.permissionList
        }
      })
    },
    openAuthDialog(role) {
      this.editSysRole = role
      this.getPermissions(role.code)
      this.showAuthDialog = true
    },
    reset() {
      this.searchParams = {}
      this.page.total = 0
      this.page.pageSize = 10
      this.page.pageNo = 1
      this.loadData()
    },
    handleCurrentChange(val) {
      this.page.pageNo = val
      this.loadData()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.loadData()
    },
    loadData() {
      let params = {
        ...this.page,
        ...this.searchParams
      }
      getAction(this.urls.list, params).then(res => {
        if (res.success) {
          let {records, current, size, total} = res.result
          this.sysRoleList = records
          this.page.pageNo = current
          this.page.pageSize = size
          this.page.total = total
        }
      })
    },
    openAddDialog() {
      this.showAddDialog = true
      this.addSysRole = {}
      this.$refs.addForm.resetFields()
    },
    closeAddDialog() {
      this.showAddDialog = false
    },
    openEditDialog(sysRole) {
      this.editSysRole = Object.assign({}, sysRole)
      this.showEditDialog = true
    },
    closeEditDialog() {
      this.showEditDialog = false
      this.$refs.editForm.resetFields()
    },
    confirmAddSysRole() {
      console.log(this.addSysRole)
      this.$refs.addForm.validate(valid => {
        if (valid) {
          postAction(this.urls.add, this.addSysRole).then(res => {
            if (res.success) {
              this.addSysRole = {}
              this.showAddDialog = false
              Message.success("添加成功！");
              this.loadData()
            }
          })
        }
      })

    },
    confirmDeleteSysRole(id) {
      getAction(this.urls.deleteById, {id}).then(res => {
        if (res.success) {
          Message.success("删除成功！");
          this.loadData()
        }
      })
    },
    confirmEditSysRole() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          postAction(this.urls.edit, this.editSysRole).then(res => {
            if (res.success) {
              this.showEditDialog = false
              this.editSysRole = {}
              Message.success("修改成功！")
              this.loadData()
            }

          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.sysRole {
  padding: 20px;

  .dataArea {
    margin-top: 20px;

    .page {
      text-align: center;
      margin-top: 20px;
    }
  }

  .actionArea {
    margin-top: 20px;
  }

  .searchArea {
    .nameInput {
      margin-right: 20px;
      width: 180px;
    }
  }

  .editDialog {
    width: 1200px;
    margin: 0 auto;
  }

  .addDialog {
    width: 1200px;
    margin: 0 auto;
  }

  .drawerWrapper {
    position: relative;
    height: calc(100vh - 65px);
    min-height: 800px;
  }

  .drawerWrapper .treeWrapper {
    padding: 16px;
    box-sizing: border-box;
    height: calc(100% - 80px);
  }

  .drawerWrapper .action {
    position: absolute;
    width: 100%;
    bottom: 0;
    box-sizing: border-box;
    height: 80px;
    line-height: 60px;
    padding: 10px 20px;
    border-top: 1px solid #d9d6d6
  }
}
</style>

<style>
.searchArea .el-button {
  border-radius: 0;
}

.actionArea .el-button {
  border-radius: 0;
}

.nameInput input {
  border-radius: 0;
}

.editDialog input, .addDialog input {
  border-radius: 0;
}
</style>
